﻿@{
    ViewBag.Title = "商品分类";
    Layout = null;
}

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>商品分类</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, minimum-scale= 1.0, initial-scale= 1.0">
    <link href="~/Content/Style/conmon.css" rel="stylesheet" type="text/css">
    <link href="~/Content/fonts/iconfont.css" rel="stylesheet" type="text/css">

    <style>
        .cont_libox {
            display: flex;
            position: absolute;
            top: 0;
            bottom: 56px;
            width: 100%;
            overflow: hidden;
        }

            .cont_libox .cont_left {
                flex: 0 0 80px;
                background-color: #f3f5f7;
            }

                .cont_libox .cont_left .menu_item {
                    display: table;
                    height: 54px;
                    width: 56px;
                    line-height: 14px;
                    font-size: 14px;
                    padding: 0 12px;
                    border-bottom: 1px solid rgba(7, 17, 27, 0.1);
                }

                    .cont_libox .cont_left .menu_item.current {
                        position: relative;
                        z-index: 10;
                        margin-top: -1px;
                        background: #fff;
                        color: #F56C03;
                        font-size: 18px;
                        font-weight: 700;
                    }

                    .cont_libox .cont_left .menu_item .text {
                        display: table-cell;
                        vertical-align: middle;
                        width: 56px;
                    }

            .cont_libox .cont_right {
                background-color: #fff;
                flex: 1;
            }

                .cont_libox .cont_right .rig_li_box .right_list .bannerBox {
                    padding: 18px;
                }

                    .cont_libox .cont_right .rig_li_box .right_list .bannerBox img {
                        width: 100%;
                    }

                .cont_libox .cont_right .rig_li_box .right_list .item_liBox {
                    display: flex;
                    flex-wrap: wrap;
                }

                    .cont_libox .cont_right .rig_li_box .right_list .item_liBox .item_li {
                        width: 33.33%;
                        text-align: center;
                    }

                    .cont_libox .cont_right .rig_li_box .right_list .item_liBox .item-img {
                        height: 60px;
                        width: 60px;
                        margin: 12px auto;
                        background-color: rgba(7, 17, 27, 0.1);
                    }

                    .cont_libox .cont_right .rig_li_box .right_list .item_liBox .text {
                        padding-bottom: 8px;
                        display: inline-block;
                    }

                    .cont_libox .cont_right .rig_li_box .right_list .item_liBox:last-child {
                        border-bottom: 1px solid #eee;
                    }

                .cont_libox .cont_right .rig_li_box .right_list .title {
                    padding-left: 14px;
                    height: 26px;
                    line-height: 26px;
                    border-left: 2px solid #d9dde1;
                    font-size: 12px;
                    color: #93999f;
                    background: #f3f5f7;
                }
    </style>

</head>
<body>
    <div id="app">
        <div class="cont_libox">
            <div class="cont_left" ref="wrapper_left">
                <ul ref="content">
                    <li v-for="(text,index) in classificationItems" class="menu_item" :class="{'current':currentIndex===index}" v-on:click="selectMenu(index,$event)">
                        <span class="text">{{text.DishesTypeName}}</span>
                    </li>
                </ul>
            </div>
            <div class="cont_right" ref="wrapper_right">
                <div class="rig_li_box">
                    <div class="right_list food-list-hook" v-for="item in classificationItems">
                        <div class="bannerBox" v-show="0">
                            <img src="../../Content/images/123.jpg" alt="" height="100" />
                        </div>
                        @*<h1 class="title">{{item.DishesTypeName}}</h1>*@
                        <div class="title">
                            <div class="line"></div>
                            <div class="text">{{item.DishesTypeName}}</div>
                            <div class="line"></div>
                        </div>
                        <div class="item_liBox">
                            <div v-for="todo in item.Children" class="item_li">
                                <a :href="'/Classification/listProductos?id='+ todo.DishesTypeID">
                                    @*<div class="item-img">
                                            <img src="../../Content/images/testImages/144.jpg" alt="" height="60" width="60" />
                                        </div>*@
                                    <div class="item-img">
                                        <img :src="ChangeTitleImg(todo.Icon)" alt="" height="60" width="60" />
                                    </div>
                                    <span class="text">{{todo.DishesTypeName}}</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footer>
            <div class="footer_box">
                <div class="footer_li">
                    <a href="/">
                        <div class="footer-img">
                            <i class="iconfont icon-union" style="font-size: 28px;"></i>
                        </div>
                        <span>首页</span>
                    </a>
                </div>
                <div class="footer_li">
                    <a href="#" style="color:#F56C03;">
                        <div class="footer-img">
                            <i class="iconfont icon-dingdan1" style="font-size: 28px;"></i>
                        </div>
                        <span>分类</span>
                    </a>
                </div>
                <div class="footer_li">
                    <a href="/ShoppingCart/Index">
                        <div class="footer-img">
                            <i class="iconfont icon-gouwuche4" style="font-size: 28px;"></i>
                        </div>
                        <span>购物车</span>
                    </a>
                </div>
                <div class="footer_li">
                    <a href="/Information/Index">
                        <div class="footer-img">
                            <i class="iconfont icon-wode1" style="font-size: 28px;"></i>
                        </div>
                        <span>个人中心</span>
                    </a>
                </div>
            </div>
        </footer>
    </div>

    <!-- 引入 Vue -->
    <script src="https://unpkg.com/vue"></script>
    <script src="~/Content/Script/jquery-1.8.3.min.js"></script>
    <script src="https://unpkg.com/better-scroll/dist/bscroll.min.js"></script>

    <script>
        Vue.config.productionTip = false;   //Vue去掉警告 You are running Vue in development mode
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    listHeight: [],
                    scrollY: 0,
                    classificationItems: '',
                };
            },
            created() {
                var _this = this;
                $.ajax({
                    url: "/Classification/getType_PC",
                    type: "Get",
                    dataType: "json",
                    success: function (data) {
                        var _data = JSON.parse(data);
                        vm.classificationItems = _data;
                        console.log(_data);
                        _this.$nextTick(() => {
                            _this._initScroll();
                            _this._calculateHeight();
                        });
                    }
                });
            },
            computed: {
                currentIndex() {
                    for (let i = 0; i < this.listHeight.length; i++) {
                        let height1 = this.listHeight[i];
                        let height2 = this.listHeight[i + 1];
                        if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
                            return i;
                        }
                    }
                    return 0;
                }
            },
            methods: {
                handleClick: function () {
                    this.$dialog.alert({
                        mes: 'Hello World!'
                    });
                },
                selectMenu(index, event) {
                    console.log(this.currentIndex);
                    if (!event._constructed) {
                        return;
                    }
                    let foodList = this.$refs.wrapper_right.getElementsByClassName('food-list-hook');
                    let el = foodList[index];
                    this.scroll_right.scrollToElement(el, 300);
                },
                _initScroll() {
                    this.scroll_left = new BScroll(this.$refs.wrapper_left, {
                        click: true
                    });
                    this.scroll_right = new BScroll(this.$refs.wrapper_right, {
                        click: true,
                        probeType: 3
                    });
                    console.log(this.scroll_right);
                    this.scroll_right.on('scroll', (pos) => {
                        this.scrollY = Math.abs(Math.round(pos.y));
                    });
                },
                _calculateHeight() {
                    let foodList = this.$refs.wrapper_right.getElementsByClassName('food-list-hook');
                    let height = 0;
                    this.listHeight.push(height);
                    for (let i = 0; i < foodList.length; i++) {
                        let item = foodList[i];
                        height += item.clientHeight;
                        this.listHeight.push(height);
                    }
                },
                ChangeTitleImg(Article_TitleImg) {
                    if (Article_TitleImg == "" || Article_TitleImg == null) {
                        Article_TitleImg = "../../Content/images/testImages/暂无图片.jpg" //后台图片为空,设置为默认图片
                    }
                    return Article_TitleImg;
                },
            }
        });
    </script>
</body>
</html>
